<template>
  <view class="full-msg" v-if="show">
    <view class="msg-box">
      <view class="msg-header text-center">
        系统消息
      </view>
      <view class="msg-body">
        <view class="msg-body__content">
          <text class="m-b-16rpx">{{ msgTitle }}</text>
          <rich-text  :nodes="msgContent" />
        </view>
      </view>
      <view class="msg-footer flex justify-end">
        <u-button type="primary" :text="`我知道了${runDelay>0?'('+runDelay+')':''}`" :color="runDelay>0?'#14a087':''" :disabled="runDelay>0" @click="handleClose"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  delay: {
    type: Number,
    default: 0,
  },
  auto: {
    type: Boolean,
    default: false
  }
})
import { logReadByMessageId, queryLastOneNotReadByType } from '@/genapi/_common'
import { useSupplierStore } from '@/store/index'

const supplierStore = useSupplierStore()

const runDelay = ref(0)
const msgTitle = ref('系统消息')
const msgContent = ref('<p>row1</p><p>row2</p>')
const msgObj = ref(null)

const show = ref(false)
let timer:any = null

async function showMsg(msg?:any, delay=props.delay){
  // let msgId = mid || props.msgId
  // if(!msgId) return false

  if(!timer) {
    runDelay.value = delay
    msgObj.value = msg
    msgTitle.value = msg?.businessDetailTypeDesc || '系统消息'
    msgContent.value = msg?.messageDetail?.[0] || '未知错误'
    show.value = true
    timer = setInterval(()=>{
      if(runDelay.value === 0){
        clearInterval(timer)
        timer = null
      }
      runDelay.value -= 1
    },1000)
  }
}

async function handleClose(){
  if(runDelay.value>0) return false

  const {data} = await logReadByMessageId({id: msgObj?.value?.messageId})
  console.log(data)
  show.value = false
}

onReady(async ()=>{
  if(props.auto){

    const {data} = await queryLastOneNotReadByType({type: 501})
    if(data.data.messageId){
    showMsg(data.data)
    }
  }
})


defineExpose({
  showMsg
})
</script>

<style scoped lang="less">
.full-msg{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6001;
}

.msg-box{
  width: 90%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.2), 0 0 8px 1px rgba(0,0,0,0.1);
  .msg-header {
    font-size: 40rpx;
    font-weight: bold;
  }
  .msg-header, .msg-footer{
    padding: 16rpx;
  }
  .msg-body{
    min-height:300rpx;
    max-height:600rpx;
    overflow: auto;
    padding: 16rpx;
    .msg-body__content{
      padding: 8rpx;
      height: 100%;
      overflow: auto;
    }
  }
}
</style>
